<template>
	<a-card class="general-card" title="公告" :header-style="{ paddingBottom: '0' }" :body-style="{ padding: '15px 20px 13px 20px' }">
		<template #extra>
			<a-link>查看更多</a-link>
		</template>
		<div>
			<div v-for="(item, idx) in list" :key="idx" class="item">
				<a-tag :color="item.type" size="small">{{ item.label }}</a-tag>
				<span class="item-content">
					{{ item.content }}
				</span>
			</div>
		</div>
	</a-card>
</template>

<script setup>
	const list = [
		{
			type: 'orangered',
			label: '活动',
			content: '内容最新优惠活动',
		},
		{
			type: 'cyan',
			label: '消息',
			content: '新增内容尚未通过审核，详情请点击查看。',
		},
		{
			type: 'blue',
			label: '通知',
			content: '当前产品试用期即将结束，如需续费请点击查看。',
		},
		{
			type: 'blue',
			label: '通知',
			content: '1月新系统升级计划通知',
		},
		{
			type: 'cyan',
			label: '消息',
			content: '新增内容已经通过审核，详情请点击查看。',
		},
	]
</script>

<style scoped lang="less">
	.item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 24px;
		margin-bottom: 4px;
		.item-content {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 4px;
			color: var(--color-text-2);
			text-decoration: none;
			font-size: 13px;
			cursor: pointer;
		}
	}
</style>
